<template>
    <div class="container">
        <div class="header">
            <el-card>
                账号管理
                <!-- <el-form label-width="80px" :model="form" :inline="true">
                    <el-form-item label="用户名">
                        <el-input v-model="form.name" placeholder="请输入用户名" clearable />
                    </el-form-item>
                    <el-form-item label="账号">
                        <el-input v-model="form.username" placeholder="请输入账号" clearable />
                    </el-form-item>
                    <el-form-item size="large">
                        <el-button type="primary" icon="el-icon-search" @click="searchclick"
                            style="margin-left: 12px">查询</el-button>
                        <el-button @click="resetSearch">重置</el-button>
                        <el-button @click="addrenyuan" type="success">添加</el-button>
                    </el-form-item>
                    </div>

                </el-form> -->
            </el-card>
        </div>
        <!-- 用户列表 -->
        <div class="mian-table">
            <div style="padding: 20px 20px 0 20px;">
                <el-button @click="addRoleInfor()" size=mini type="primary" icon="el-icon-plus">新增</el-button>
                <el-drawer :title="type===0?'新增用户信息':'修改用户信息'" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
                    <template>
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                            class="demo-ruleForm">
                            <el-form-item label="用户名" prop="name">
                                <el-input class="form-item" v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="账号" prop="username">
                                <el-input class="form-item" v-model="ruleForm.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="pwd">
                                <el-input class="form-item" v-model="ruleForm.pwd"></el-input>
                            </el-form-item>
                            <el-form-item label="请选择角色" prop="pwd">
                                <el-select v-model="ruleForm.quanxianid" placeholder="请选择角色">
                                    <el-option v-for="item in options" :key="item.name" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm()">{{ this.type === 0 ? '新增' : '修改'
                                    }}</el-button>
                                <el-button @click="cancel()">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-drawer>
            </div>
            <div style="margin: 20px">
                <el-table :data="tableData" height="600px" border
                    style="width: 100%;margin-top: 10px;margin-bottom: 10px;">
                    <template v-for="(val, index) in columns">
                        <el-table-column align="center" :label="val.title" :key="index" :prop="val.dataKey">
                        </el-table-column>
                    </template>
                    <el-table-column label="角色" align="center">
                        <template slot-scope="scope" align="center">
                            {{roleMap[scope.row.quanxianid]}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope" align="center">
                            <el-button @click="updateRoleInfor(scope.row)" size="mini" type="text">修改</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button @click="deleteRoleInfor(scope.row)" slot="reference" size="mini" type="text"
                                style="color: #F56C6C;">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="footer">
            <!-- <el-pagination align="center" background @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page.sync="form.pageNo"
                :page-size="form.pageSize" :page-sizes="[1, 10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
            </el-pagination> -->
        </div>
    </div>
</template>
<script>
import { getUserList, addUser, updateUser, deleteUser } from "@/api/userMangement.js";
import { getRoleList } from "@/api/roleMangement.js";
import {arrToObj} from '@/utils/utils.js'
export default {
    data() {
        return {
            options:[],   //角色列表
            loading: false,
            type: 0,  //按钮类型
            ruleForm: {
                name: '',
                username: '',
                pwd: '',
                quanxianid: '',
                adminid:Number(localStorage.getItem('userId'))
            },
            currentPage: 1,
            pageSize: 1,
            roleMap:'',
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            },
            drawer: false,
            direction: 'rtl',
            form: {
                name: '',
                username: '',
                pageNo: 1,
                pageSize: 10,
                adminid:Number(localStorage.getItem('userId'))
            },
            tableData: [],
            columns: [
                {
                    dataKey: 'name',
                    title: '用户名',
                },
                {
                    dataKey: 'username',
                    title: '账号',
                },
            ],
        }
    },
    beforeMount() {
        this.getList()
        this.RoleList()
    },
    methods: {
        // 获取用户列表
        async getList() {
            this.loading = true
            let arr = await getUserList(this.form)
            if (arr.code == 0 && arr.data.length !== 0) {
                this.tableData = arr.data ?? []
                this.loading = false
            }
        },
        //获取角色列表
        async RoleList(){
            const arr=await getRoleList({adminid:Number(localStorage.getItem('userId'))})
            //  console.log(arr.data)   
             this.options=arr.data   
             this.roleMap=arrToObj(this.options)   
        },
        // 关闭抽屉
        handleClose() {
            this.drawer = false
            // this.$router.go(0)
        },
        // 重置表单
        resetForm() {
            this.ruleForm = {
                name: '',
                username: '',
                pwd: '',
                quanxianid: '',
            }
        },
        // 取消按钮
        cancel(){
            this.drawer = false
            this.ruleForm = {
                name: '',
                username: '',
                pwd: '',
                quanxianid: '',
            }
        },
        // 新增用户
        addRoleInfor() {
            this.drawer = true
            this.type = 0
        },
        // 修改用户
        updateRoleInfor(row) {
            console.log(row)
            this.drawer = true
            this.type = 1
            this.ruleForm = row
        },
        // 删除用户
        deleteRoleInfor(row) {
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteUser({ id: row.id,adminid:Number(localStorage.getItem('userId')) }).then(res => {
                    if (res.code === 0) {
                        this.$message.success("删除成功!");
                        this.getList()
                    } else {
                        this.$message.success("删除失败", res.error);
                    }
                })
            }).catch(() => {
                console.log('取消啦！')
            });
        },
        // 新增/修改用户提交
        submitForm(ruleForm) {
            this.$refs.ruleForm.validate((valid)=>{
                if(valid){
            if (this.type === 1) {
                this.form.adminid=Number(localStorage.getItem('userId'))
                updateUser(this.ruleForm).then(res => {
                    if (res.code === 0) {
                        this.$message.success("修改成功!");
                        // this.drawer = false
                        this.getList()
                        this.cancel()
                    } else {
                        this.$message.success("修改失败", res.error);
                    }
                })
            } else {
                this.form.adminid=Number(localStorage.getItem('userId'))
                addUser(this.ruleForm).then(res => {
                    if (res.code === 0) {
                        this.$message.success("新增成功!");
                        // this.drawer = false
                        this.getList()
                        // this.resetForm()
                        this.cancel()
                    } else {
                        this.$message.success("新增失败", res.error);
                    }
                })
            }
        }else{
            return false
        }
        })
        }
        
    },
}
</script>
<style style="scss" scoped>
.header {
    font-size: 18px;
    font-weight: 400
}

.container {
    background-color: #EBEEF5
}

.mian-table {
    height: 693px;
    margin: 20px;
    background-color: white;

    .form-item {
        width: 250px;
    }
}

.footer {
    height: 3%;
    background-color: white;
    /* text-align: center; */
    padding: 20px
}
</style>